<template>
	<div class="contactInformation-info">
		<div class="contactInformation-model"></div>
		<div class="contactInformation-top">
			<div class="font-box">
				<div class="phone">
					{{$t("companyModel.phone")}}
				</div>
				<div class="email">
					{{$t("companyModel.email")}}
				</div>
				<div class="address">
					{{$t("companyModel.address")}}
				</div>
			</div>
			<div class="contactInformation-img">
				<img src="../../static/img/banner5.jpg" alt="">
			</div>
		</div>
	</div>
</template>


<script>
	export default {
		name: "contactInformation",
		data() {
			return {

			}
		},
		mounted() {},
		methods: {},
	}
</script>


<style scoped>
	/* 公司简介 */
	.contactInformation-info {
		width: 100%;
		height: calc(100vh - 50px);
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url('../../assets/images/firm-info.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		overflow: hidden;
		position: relative;
	}

	.contactInformation-model {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
		z-index: 1;
	}

	.contactInformation-top {
		width: 1200px;
		z-index: 2;
		color: #fff;
		font-weight: 600;
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/*  */
	.font-box {
		margin-right: 60px;
	}

	.phone {}

	.email {
		margin: 20px 0;
	}

	.address {}

	.contactInformation-img img {
		width: 500px;
	}
</style>
